<template>
  <div class="navigation">
    <!-- 轮播图 -->
    <div class="banner">
      <ul class="lunbo">
        <li
          v-for="(item, index) in swiper"
          :key="index"
          v-show="index == tempIndex"
        >
          <transition name="fade">
            <img :src="item" alt="" v-show="index == tempIndex" />
          </transition>
        </li>
      </ul>

      <div class="pagination">
        <span
          v-for="item in swiper.length"
          :key="item"
          :class="item - 1 == tempIndex ? 'cli' : ''"
          @click="pagination(item - 1)"
        ></span>
      </div>

      <div class="left_btn" @click="cli_left"></div>
      <div class="right_btn" @click="cli_right"></div>
    </div>
    <!-- 多级菜单 -->
    <div class="menu_warp">
      <div class="menu">
        <div class="citem" v-for="(item, index) in menu" :key="index">
          <a href="#" class="item_name"
            ><span>{{ item.title }}</span
            ><img src="http://1.117.75.96:8080/goods/UI/arrow1.png" alt=""
          /></a>
          <div class="children">
            <div class="childitem" v-for="childitem in item.c">
              <a href="#" class="leftbox">
                <img :src="childitem.img" alt="" />
                <span>{{ childitem.name }}</span>
              </a>
              <div class="rightbox">
                <a href="#" class="f1" v-for="val in childitem.list">{{
                  val
                }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    menu: {
      type: Array,
      default: []
    },
    swiper: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      tempIndex: 0,
      autoTag: 0
    }
  },
  methods: {
    cli_left() {
      clearInterval(this.autoTag)
      this.autoPlay()
      if (this.tempIndex > 0) {
        this.tempIndex--
      }
    },
    cli_right() {
      clearInterval(this.autoTag)
      this.autoPlay()
      if (this.tempIndex < this.swiper.length - 1) {
        this.tempIndex++
      }
    },
    pagination(index) {
      this.tempIndex = Number(index)
    },
    autoPlay() {
      this.autoTag = setInterval(() => {
        this.tempIndex++
        if (this.tempIndex == this.swiper.length) {
          this.tempIndex = 0
        }
      }, 3000)
    }
  },
  mounted() {
    this.autoPlay()
  }
}
</script>

<style lang="less" scoped>
.navigation {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;

  .banner {
    height: 500px;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;

    .lunbo {
      transform: translate3d(0, 0, 0);
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .pagination {
      position: absolute;
      text-align: center;
      bottom: 10px;
      left: 50% !important;
      transform: translateX(-50%) !important;
      z-index: 10;

      span {
        margin: 0 5px;
        width: 10px;
        height: 10px;
        background: #fff;
        opacity: 1;
        display: inline-block;
        border-radius: 100%;
        cursor: pointer;
      }

      .cli {
        background: #00a8ff;
      }
    }

    .left_btn {
      width: 56px;
      height: 56px;
      margin-top: -28px;
      color: #fff;
      outline: none;
      left: 50%;
      margin-left: -373px;
      background: url(http://1.117.75.96:8080/goods/UI/l_r1.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      z-index: 10;
      top: 50%;
      cursor: pointer;
    }

    .right_btn {
      width: 56px;
      height: 56px;
      margin-top: -28px;
      color: #fff;
      outline: none;
      right: 50%;
      margin-right: -609px;
      background: url(http://1.117.75.96:8080/goods/UI/l_r2.png) no-repeat;
      background-size: 100% 100%;
      position: absolute;
      z-index: 10;
      top: 50%;
      cursor: pointer;
    }
  }

  .menu_warp {
    position: absolute;
    left: 50%;
    top: 25px;
    width: 1226px;
    height: 0;
    margin-left: -613px;
    z-index: 9;

    .menu {
      position: relative;
      width: 240px;
      height: 450px;
      background: rgba(254, 255, 254, 0.95);
      backdrop-filter: blur(50px);
      box-shadow: 0px 10px 20px 0px rgb(84 86 96 / 10%);

      .citem {
        margin-bottom: 5px;

        .item_name {
          display: block;
          padding: 0 20px 0 30px;
          height: 60px;
          line-height: 60px;
          font-size: 0;
          color: rgba(52, 54, 59, 0.75);
          cursor: pointer;

          span {
            width: 160px;
            font-size: 18px;
            display: inline-block;
            vertical-align: middle;
          }

          img {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
            height: 20px;
            margin-left: 10px;
          }
        }

        .item_name:hover {
          color: #222;
          background-color: #fff;
        }

        .children {
          display: none;
          position: absolute;
          left: 240px;
          top: 0;
          width: 857px;
          height: 450px;
          background: #fff;
          overflow-x: hidden;
          overflow-y: auto;

          .childitem {
            font-size: 0;
            color: #34363b;
            white-space: nowrap;
            margin-bottom: 5px;

            .leftbox {
              vertical-align: top;
              padding: 0 15px 0 25px;
              width: 137px;
              height: 52px;
              font-size: 16px;
              line-height: 52px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: inline-block;

              img {
                width: 32px;
                height: 32px;
                margin-right: 5px;
                vertical-align: middle;
              }

              span {
                line-height: 52px;
              }
            }

            .leftbox:hover {
              color: #1e7cff !important;
            }

            .rightbox {
              padding-left: 10px;
              width: 670px;
              overflow: hidden;
              display: inline-block;
              vertical-align: middle;

              .f1 {
                padding: 0 15px 0 20px;
                margin-top: 15px;
                font-size: 16px;
                line-height: 22px;
                width: auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-wrap: normal;
                float: left;
                // border-right: 1px solid #d6d4d4;
              }

              .f1:hover {
                color: #1e7cff;
              }
            }

            ::after {
              content: '';
              position: absolute;
              left: 176px;
              top: 0;
              bottom: 0;
              width: 1px;
              background-color: #f1f3f5;
            }
          }
        }
      }

      //测试使用test
      .citem:hover .children {
        display: block;
      }
    }
  }
}
</style>
